<script setup>

import { useReportStore } from "@/stores/counter.js";
import { htmlToPDF } from "@/utils/html2pdf.ts";
import { ref } from "vue";
const reportStore = useReportStore();
// console.log(reportStore.basicReport)
const apkInfo =ref()
const cerInfo =ref()
const preRe = ref()
const tableDataDan2 = ref()
// const show = ref(true)

const storedApk = sessionStorage.getItem('apkInfo');
const storedCer = sessionStorage.getItem('cerInfo');
const storedPerRe = sessionStorage.getItem('preRe');
const storedTableData2 = sessionStorage.getItem('tableDataDan2');
if(storedApk && storedCer && storedPerRe){
  apkInfo.value = JSON.parse(storedApk);
  cerInfo.value = JSON.parse(storedCer);
  preRe.value = JSON.parse(storedPerRe);
  tableDataDan2.value = JSON.parse(storedTableData2);
}

const btnClick = ()=>{
  // show.value = false
  htmlToPDF('test-id', '分析报告')
}
</script>

<template>
  <div v-if="apkInfo && cerInfo && preRe && tableDataDan2">
    <el-button
              type="primary"
              size="large"
              style="font-weight: bold; margin-top: 13px"
              class="derive"
              plain
              @click="btnClick"
            >
              <SvgIcon
                iconName="icon-daochu"
                style="margin-right: 5px"
                color="white"
              ></SvgIcon
              >导出报告
    </el-button>
    <div id="test-id">
    <div class="container"  >
      <div class="head">APK分析报告</div>
      <img class="appIcon" :src="'data:image/png;base64,' + apkInfo.icon" width="100px" height="100px">
      <table class="table1">
        <caption class="caption">模型分析</caption>
        <tbody>
        <tr>
          <td>预测结果</td>
          <td>{{preRe}}</td>
        </tr>
        </tbody>
      </table>
      <table>
        <caption class="caption">基本信息</caption>
        <tbody>
          <tr>
            <td>文件名</td>
            <td>{{apkInfo.file_name || "N/A"}}</td>
          </tr>
          <tr>
            <td>文件大小</td>
            <td>{{ parseFloat(apkInfo.app_size).toFixed(2) + "MB" || "N/A" }}</td>
          </tr>
          <tr>
          <td>MD5值</td>
            <td>{{ apkInfo.md5 || "N/A" }}</td>
          </tr>
          <tr>
          <td>SHA1值</td>
            <td>{{ apkInfo.sha1 || "N/A" }}</td>
          </tr>
          <tr>
          <td>SHA256值</td>
            <td>{{ apkInfo.sha256 || "N/A" }}</td>
          </tr>
          <tr>
          <td>APK名称</td>
            <td>{{ apkInfo.app_name || "N/A" }}</td>
          </tr>
          <tr>
          <td>版本号</td>
            <td>{{ apkInfo.version_code || "N/A" }}</td>
          </tr>
          <tr>
          <td>版本名</td>
            <td>{{ apkInfo.version_name || "N/A" }}</td>
          </tr>
          <tr>
          <td>包名</td>
            <td>{{ apkInfo.package_name || "N/A" }}</td>
          </tr>
          <tr>
          <td>合格</td>
            <td>cerInfo.validity</td>
          </tr>
          <tr>
          <td>V1签名</td>
            <td>{{ cerInfo.v1_signature || "N/A" }}</td>
          </tr>
          <tr>
          <td>V2签名</td>
            <td>{{ cerInfo.v2_signature || "N/A" }}</td>
          </tr>
          <tr>
          <td>V3签名</td>
            <td>{{ cerInfo.v3_signature || "N/A" }}</td>
          </tr>
          <tr>
          <td>主题</td>
            <td>{{ cerInfo.cert_subject || "N/A" }}</td>
          </tr>
          <tr>
          <td>唯一证书</td>
            <td>{{ cerInfo.unique_certificates || "N/A" }}</td>
          </tr>
          <tr>
          <td>签发者</td>
            <td>{{ cerInfo.cert_issuer || "N/A" }}</td>
          </tr>
          <tr>
          <td>序列号</td>
            <td>{{ cerInfo.cert_serial_number || "N/A" }}</td>
          </tr>
          <tr>
          <td>生效日期</td>
            <td>{{ cerInfo.cert_not_valid_before || "N/A" }}</td>
          </tr>
          <tr>
          <td>失效日期</td>
            <td>{{ cerInfo.cert_not_valid_after || "N/A" }}</td>
          </tr>
          <tr>
          <td>SHA-1</td>
            <td>{{ cerInfo.cert_sha1 || "N/A" }}</td>
          </tr>
          <tr>
          <td>SHA-256</td>
            <td>{{ cerInfo.cert_sha256 || "N/A" }}</td>
          </tr>
          <tr>
          <td>证书签名算法</td>
            <td>{{ cerInfo.cert_signature_algorithm || "N/A" }}</td>
          </tr>
          <tr>
          <td>证书哈希算法</td>
            <td>{{ cerInfo.cert_hash_algorithm || "N/A" }}</td>
          </tr>
          <tr>
          <td>证书公钥算法</td>
            <td>{{ cerInfo.cert_public_key_algorithm || "N/A" }}</td>
          </tr>
          <tr>
          <td>证书密钥长度</td>
            <td>{{ cerInfo.cert_key_length || "N/A" }}</td>
          </tr>
        </tbody>
      </table>
      <div class="dyResult">动态分析结果</div>
      <el-table
      :data="tableDataDan2"
      border
      style="width: 80%; margin-top: 20px"
      id="tableDanger"
    >
      <el-table-column width="250" prop="ip" label="IP地址" />
      <el-table-column prop="url" label="URL" />
      <el-table-column prop="timestamp" label="时间戳" />
    </el-table>
   </div>
  </div>
  </div>
  <div v-else>
    <el-result
        icon="warning"
        title="注意"
        sub-title="请先到分析页进行分析，再导出报告！"
      >
      </el-result>
  </div>
</template>

<style lang="less" scoped>
.table1{
  font-size: 18px;
}
.dyResult{
  font-size: 18px;
  font-weight: bold;
  margin-top: 3px;
}
.caption{
  font-size: 18px;
  font-weight: bold;
  margin-bottom:18px;
  color: black;
}
.el-button{
  position: absolute;
  right: 20px;
  top:55px
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep .appIcon{
  margin: 20px auto 0 auto;

}
.head{
  font-size: 25px;
  font-weight: bold;
}
table{
  border-collapse: collapse; /* 合并表格边框 */
  border: 1px solid #c0c4cc;

  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  //text-align: center;
  margin: 20px;
  overflow-y: auto;
  color: #616365;
  font-size: 15px;
  th,td{
    border: 1px solid #c0c4cc;
    padding: 8px 5px;
  }
}
td:first-child{
  text-align: center;
  color: #4a4a4b;
}
</style>